<template>
  <view class=" danmu">
    <scroll-view scroll-y="true" style="width: 520rpx;height: 300rpx;" scroll-with-animation="true" class="pl-3"
      :scroll-into-view="scrollIntoView" :show-scrollbar="false">
      <view :id="'danmu' + item.id" class="flex justify-start align-start rounded p-2 mb-2"
        style="background-color: rgba(255, 255, 255, 0.2);" v-for="(item,index) in list" :key="index">
        <text class="font-md text-danger">{{item.name}}：</text>
        <text class="font-md text-white">{{item.content}}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      scrollIntoView: "",
    };
  },
  methods: {
    send(data) {
      this.list.push(data);
      this.toBottom();
    },
    toBottom() {
      setTimeout(() => {
        let len = this.list.length;
        if (len > 0 && this.list[len - 1]) {
          this.scrollIntoView = "danmu" + this.list[len - 1].id;
        }
      }, 200);
    },
  },
};
</script>

<style>
.danmu {
  position: fixed;
  bottom: 120rpx;
  left: 0;
  right: 0;
  width: 520rpx;
  height: 300rpx;
}
</style>
